<template>
  <view 
    class="result-custom-page"
    :style="{backgroundImage:'url('+staticImgs.topBg+')'}"
    v-if="isLoadOk"
  >
  
  <view class="tit-img-box-abs" :style="{'top':topH+'rpx'}">
    <view class="tit-img-box">
      {{name}}
    </view>
  </view>
  
       <view class="res-block">
        <view class="tip">您的类型是</view>
        <view class="res">{{report.conculsion}}</view>
       </view>
       
       <view
        class="detail-block-wrapper"
        :style="{backgroundImage:'url('+staticImgs.img_1+')'}"
       >
         <view class="detail-block">
          <image class="tit-img" :src="staticImgs.tit_1" mode="widthFix"></image>
          <view class="tit-1">{{report.tit_1}}</view>
          <view class="tit-2">{{report.tit_2}}</view>
          
           <view class="p" v-for="(item,index) in report.p" :key="index">
              {{item}}
           </view>
           
           <view class="block" v-for="(item,index) in report.contentArr" :key="index">
             <view class="tit">{{item.tit}}</view>
             <view class="p" v-for="(subItem,subIndex) in item.p" :key="subIndex">
               {{subItem}}
             </view>
           </view>
         </view>
       </view>
       <view class="detail-block-wrapper" style="margin-top: -258rpx;padding-bottom: 0; margin-bottom: 84rpx;">
         <view class="detail-block">
          <image class="tit-img" :src="staticImgs.tit_3" mode="widthFix"></image>
        
           <view class="p" v-for="(item,index) in report.suggestion.p" :key="index">
              {{item}}
           </view>
           
           <view class="block" v-for="(item,index) in report.suggestion.contentArr" :key="index">
             <view class="tit">{{item.tit}}</view>
             <view class="p" v-for="(subItem,subIndex) in item.p" :key="subIndex">
               {{subItem}}
             </view>
           </view>
         </view>
       </view>
       <view class="detail-block-2" v-if="moreData && moreData.sciencePopularization && moreData.sciencePopularization.contentArr">
         <image class="tit-img" :src="staticImgs.tit_2" mode="widthFix"></image>
         
         <view class="p" v-for="(item,index) in moreData.sciencePopularization.contentArr" :key="subIndex">
           
             {{item.p}}
           
         </view>
         
       </view>
   </view>
</template>

<script>
  var app = getApp();
  export default {
    components:{},
    props:{
      pageData:{
        type:Object,
        default:null
      }
    },
    data(){
      return {
        staticImgs:{
          topBg:this.imgBaseURL + '/scl/result/CRYL/top-bg.jpg',
          img_1:this.imgBaseURL + '/scl/result/CRYL/img-1.png',
          tit_1:this.imgBaseURL + '/scl/result/CRYL/tit-1.png',
          tit_2:this.imgBaseURL + '/scl/result/CRYL/tit-2.png',
          tit_3:this.imgBaseURL + '/scl/result/CRYL/tit-3.png',
        },
        isLoadOk:false,
        report:{},
        delayload:false,
        moreData:{},
        topH: 0,
        name:''
      }
    },
    mounted() {
      this.topH = app.globalData.topHeight * 2
    },
    watch:{
      showCanvas(val){
        if(val){
          
        }
      },
      pageData:{
        handler(v){
          console.log(v,'======pageDatas')
          if(v){
            this.report = v.detailedResults
            this.report.tit_1 = this.report.tit.split(':')[0]
            this.report.tit_2 = this.report.tit.split(':')[1]
            this.moreData = v.moreData
            this.name = v.name
            console.log(this.report,'-----this.report------')
            console.log(this.moreData,'-----this.moreData----')
            //moreData.sciencePopularization.contentArr
            this.isLoadOk = true
            
            
          }
        },
        immediate:true,
        deep:true
      }
    },
    methods:{

    }
  }
</script>

<style lang="scss" scoped>
  view{
    box-sizing: border-box;
    word-break: break-all;
  }
  
  .tit-img-box-abs {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .tit-img-box {
    width: 522rpx;
    height: 50rpx;
  
    .img {
      width: 100%;
      // height: 100%;
    }
    
    height: 50rpx;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 800;
    font-size: 46rpx;
    color: #984B29;
    line-height: 52rpx;
    text-stroke: 3px #FFFFFF;
    text-align: center;
    width: 660rpx;
    font-style: normal;
    word-break: keep-all;
    text-shadow: -4rpx -4rpx 10rpx #fff;
  }
  
 .result-custom-page{
   box-sizing: border-box;
   width: 100vw;
   min-height: 100vh;
   position: relative;
   background-size: contain;
   background-repeat: no-repeat;
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);  
   background-color: #FFEEF0;
   
   .res-block{
     padding-top: 820rpx;
     .tip{
       font-family: PingFang-SC, PingFang-SC;
       font-weight: 800;
       font-size: 30rpx;
       color: #333333;
       line-height: 42rpx;
       letter-spacing: 1px;
       text-align: center;
       font-style: normal;
     }
     
     .res{
       font-family: PingFang-SC, PingFang-SC;
       font-weight: bold;
       font-size: 50rpx;
       color: #A12162;
       line-height: 70rpx;
       text-align: center;
       font-style: normal;
       margin-top: 20rpx;
     }
   } 
   // res-block -end
   
   .detail-block-wrapper{
     padding-bottom: 828rpx;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: bottom;
   }
   
   .detail-block{
     width: 692rpx;
     // height: 1925rpx;
     background: linear-gradient( 180deg, #FEF0FF 0%, #FFFFFF 53%, #FFE9F4 100%);
     box-shadow: 0rpx 2rpx 20rpx 0rpx #FFC7E7;
     border-radius: 23rpx;
     margin: auto;
     margin-top: 56rpx;
     padding: 80rpx 30rpx 30rpx 30rpx;
     position: relative;
     
     .tit-img{
       width: 436rpx;
       height: 90rpx;
       position: absolute;
       left: 50%;
       top: -24rpx;
       transform: translateX(-50%);
     }
     
     >.tit-1,>.tit-2{
       font-family: PingFangSC, PingFang SC;
       font-weight: 600;
       font-size: 28rpx;
       color: #481044;
       line-height: 48rpx;
       text-align: center;
       font-style: normal;
     }
     
     >.p{
       margin-top: 20rpx;
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       font-size: 28rpx;
       color: #481044;
       line-height: 48rpx;
       text-align: justify;
       font-style: normal;
       text-indent: 2em;
     }
     
     >.block{
       
       >.tit{
         width: 632rpx;
         height: 60rpx;
         background: linear-gradient( 90deg, #FFD3E6 0%, #FEF5FF 100%);
         border-radius: 10rpx;
         
         padding: 0 16rpx;
         
         font-family: PingFang-SC, PingFang-SC;
         font-weight: bold;
         font-size: 28rpx;
         color: #481044;
         line-height: 60rpx;
         text-align: left;
         font-style: normal;
         
         margin-top: 40rpx;
       }
       
       >.p{
         margin-top: 20rpx;
         
         font-family: PingFangSC, PingFang SC;
         font-weight: 400;
         font-size: 28rpx;
         color: #481044;
         line-height: 48rpx;
         text-align: justify;
         font-style: normal;
         
         text-indent: 2em;
       }
       
     }
   }
   
   .detail-block-2{
     width: 692rpx;
     
     background: linear-gradient( 180deg, #FEF0FF 0%, #FFFFFF 53%, #FFE9F4 100%);
     box-shadow: 0rpx 2rpx 20rpx 0rpx #FFC7E7;
     border-radius: 23rpx;
     margin: auto;
     
     padding: 80rpx 30rpx 30rpx 30rpx;
     position: relative;

     
     .tit-img{
       width: 512rpx;
       height: 90rpx;
       position: absolute;
       left: 50%;
       top: -24rpx;
       transform: translateX(-50%);
     }
     
     >.p{
       font-family: PingFangSC, PingFang SC;
       font-weight: 400;
       font-size: 28rpx;
       color: #481044;
       line-height: 48rpx;
       text-align: justify;
       font-style: normal;
       
       margin-bottom: 20rpx;
       text-indent: 2em;
     }
   }
   
   
  }
</style>